<template>
  <van-popup v-model="show" position="bottom">
    <div class="box">
      <div class="btop">
        <div class="t1">{{ $t("long.xiadanerciqueren") }}</div>
        <div class="t2">
          <span :class="twoConfirmForm.side == '多' ? 'green' : 'red'"
            >{{
              twoConfirmForm.operationType == "开"
                ? $t("long.kai")
                : $t("long.ping")
            }}{{
              twoConfirmForm.side == "多" ? $t("long.duo") : $t("long.kong")
            }}</span
          >
          {{ twoConfirmForm.multiple }}X {{ twoConfirmForm.symbolName }}
          {{ $t("common.yongxu") }}
        </div>
        <img
          @click="show = false"
          class="close-img"
          src="../../../assets/images/close.png"
          alt=""
        />
      </div>
      <div class="main1">
        <div class="m1-li">
          <div class="mli1">{{ $t("long.weituojiage") }}</div>
          <div class="mli2">
            {{
              twoConfirmForm.priceModel == 1
                ? $t("common.shijia")
                : $t("common.xianjia")
            }}
          </div>
        </div>
        <div class="m1-li">
          <div class="mli1">{{ $t("common.shuliang") }}</div>
          <div class="mli2">
            {{ twoConfirmForm.number || "--" }}{{ twoConfirmForm.curName }}
          </div>
        </div>
        <div class="m1-li">
          <div class="mli1">{{ $t("common.leixing") }}</div>
          <div class="mli2">
            {{
              twoConfirmForm.mode == 1
                ? $t("common.quancang")
                : $t("long.zhucang")
            }}
          </div>
        </div>
      </div>
      <van-button type="info" class="confirm" @click="handleSubmit">{{
        $t("long.queren")
      }}</van-button>
    </div>
  </van-popup>
</template>

<script>
export default {
  props: ["twoConfirmForm"],
  data() {
    return {
      detail: {},
      show: false,
    };
  },
  created() {},
  methods: {
    handleSubmit() {
      this.$emit("handleConfirm");
    },
  },
};
</script>

<style lang="scss" scoped>
.van-popup {
  background-color: #090A1B;
}
.box {
  padding: 3vw 3vw 6vw;
  .btop {
    width: 100%;
    height: 10vw;
    position: relative;
    font-size: 4.2vw;
    text-align: left;
    .t1 {
      margin: 3vw 0 2vw 0;
    }
    .t2 {
      font-size: 3.6vw;
      margin-bottom: 2vw;
    }
    .close-img {
      width: 7vw;
      position: absolute;
      right: 0vw;
      top: 0vw;
    }
  }
  .main1 {
    padding: 8vw 0;
    border-bottom: 1px solid #171A2B;
    .m1-li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 7vw;
      .mli1 {
        font-size: 3.2vw;
        color: #8992AE;
      }
      .mli2 {
        font-size: 3.4vw;
        font-weight: 600;
        color: #fff;
      }
    }
  }
}
.van-cell {
  background-color: #171A2B;
  color: #fff !important;
  padding-right: 0 !important;
  padding-left: 0 !important;
}
.confirm {
  width: 100%;
  height: 10vw;
  color: #fff;
  background-color: #1989fa;
  border: 1px solid #1989fa;
}
.red {
  color: #e45360 !important;
}

.green {
  color: #5eba89 !important;
}
</style>